<template>
  <div>
    <el-dialog :visible.sync="coSelectVisible" :append-to-body="true">
      <div class="panelWrap co-wrap">

        <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
          <div>公司查询</div>
          <i class="el-icon-close" @click="handleCloseDialogUpdate" />
        </div>
        <div class="coSelect-dialog m-t-20 m-b-20">
          <div class="flex flexac m-l-15">
            <el-input v-model="queryParam.companyName" class="co-input m-l-10" placeholder="请输入公司名称" @keyup.enter.native="getOrg" @input="handleSearch" />
            <el-button class="searchBtn co-btn flex flexac m-l-20 m-r-20" size="small" type="warning" @click="getOrg"><i class="co-i" /><span class="search1">查 询</span></el-button>
            <el-button class="defaultbtn co-btn saveBtn m-l-10 el-icon-success" @click="handleSelectSave">选 中</el-button>
          </div>
          <el-table
            ref="multipleTable"
            class="m-t-30 con-table m-b-25"
            type="expand"
            :data="dataList.slice((paging.currentPage - 1) * paging.pageSize, paging.currentPage * paging.pageSize)"
            highlight-current-row
            @select-all="handleCheck"
            @select="handleCheck"
            @selection-change="handleCheckChange"
            @row-dblclick="dbSelected"
          >
            <el-table-column type="selection" align="center" width="55" height="40" />
            <template v-for="item in tablehead">
              {{ item }}
              <el-table-column :key="item.index" align="center" :prop="item.prop" :label="item.label" />
            </template>
          </el-table>
        </div>
        <el-pagination
          class="paginationWrap co-page flex m-l-10"
          :current-page="paging.currentPage"
          :page-sizes="paging.pageSizeArr"
          :page-size="paging.pageSize"
          :pager-count="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { fetchCompanies } from '@/api/baseInfo/authority/company'
// import { fetchOrgList } from '@/api/baseInfo/authority/org'
// import { fetchUserCompany } from '@/api/baseInfo/authority/user'

import { showNotice } from '@/utils/toolclass'

export default {
  name: 'CoSelect',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    queryParam: {
      type: Object,
      default: () => ({
        companyId: '',
        companyName: ''
      })
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      row: {},
      coSelectVisible: false,
      dataList: [],
      userList: [],
      paging: {
        currentPage: 1,
        pageSize: 4,
        pageSizeArr: [4, 8, 10, 14],
        total: 4
      },
      tablehead: [
        {
          index: 1,
          prop: 'companyName',
          label: '公司名称',
          sortable: false,
          fixed: true,
          isShow: true
        }
      ]
    }
  },
  computed: {},
  watch: {
    coSelectVisible(v) {
      this.$emit('input', v)
    },
    value(v) {
      this.coSelectVisible = v
    }
  },
  mounted() {
    this.getCoSelectList()
    this.getUserList()
  },
  methods: {
    // 单选操作，全选按钮失效操作
    handleCheck(selection, row) {
      this.$refs.multipleTable.clearSelection()
      if (selection.length === 0) { // 判断selection是否有值存在
        return
      }
      if (row) {
        this.selectioned = row
        this.row = row
        this.$refs.multipleTable.toggleRowSelection(row, true)
      }
    },

    // 取消单选的checkbox
    handleCheckChange(row) {
      if (row.length === 0) {
        this.selectioned = null
      }
    },
    dbSelected(row) {
      this.$emit('update', row)
      // showNotice('success', '提示', '保存成功!')
      this.$emit('handleRefresh')
      this.$emit('handleCloseDialog')
      this.coSelectVisible = false
    },
    handleSelectSave() {
      if (!this.selectioned) {
        showNotice('error', '提示', '请选择公司')
      } else {
        this.$emit('update', this.row)
        this.$emit('handleRefresh')
        this.$emit('handleCloseDialog')
        this.coSelectVisible = false
      }
    },
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getCoSelectList()
    },
    handleCurrentChange(val) {
      this.paging.currentPage = val
      this.getCoSelectList()
    },
    // 模糊查询
    getOrg() {
      fetchCompanies().then(res => {
        if (res.code === '000000') {
          this.dataList = res.data.filter(item => {
            if (item.companyName.toLowerCase().indexOf(this.queryParam.companyName) > -1) {
              return this.dataList.push(item)
            }
          })
          this.handleSearch(this.dataList)
          showNotice('success', '提示', '查询成功')
        } else {
          // showNotice('error', '提示', res.msg)
        }
      })
    },
    handleSearch(companyName) {
      if (this.queryParam.companyName === '') {
        this.getCoSelectList()
      }
    },
    getCoSelectList() {
      fetchCompanies().then(res => {
        if (res.code === '000000') {
          this.dataList = res.data ? res.data : []
          const i = this.dataList.map(item => item)
          this.paging.total = i.length
        } else {
          // showNotice('error', '提示', res.msg)
        }
      })
    },
    handleUserSearch(companyName) {
      if (this.queryParam.companyName === '') {
        this.getUserList()
      }
    },
    getUserList() {
      fetchUserCompany().then(res => {
        // console.log(res.data)
        // this.userList = res.data ? res.data : []
        // const i = this.userList.map(item => item)
        // this.paging.total = i.length
      })
    },
    getUserOrg() {
      fetchUserCompany().then(res => {
        this.userList = res.data.filter(item => {
          if (item.companyName.toLowerCase().indexOf(this.queryParam.companyName) > -1) {
            return this.userList.push(item)
          }
        })
        this.handleUserSearch(this.userList)
      })
    },
    handleCloseDialogUpdate() {
      this.coSelectVisible = false
    }
  }

}
</script>

<style lang="scss">
.el-dialog {
  width: 500px;
}
.el-dialog__headerbtn {
  display: none;
}
.el-dialog__header {
  padding: 0;
}
.el-dialog__body {
  padding: 0;
}
  .co-btn {
    height: 40px;
  }
  .search1 {
    vertical-align: middle;
    font-size: 14px;
  }
  .co-input {
    width: 240px;
  }
</style>

<style lang="scss" scoped>
.co-wrap {
  position: relative;
  .co-page {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
.panelWrap {
  width: 600px;
  height: 460px;
  background: #ffffff;
  .el-icon-success:before {
    margin-right: 4px;
  }

  .searchBtn {}
}

</style>
